<template>
  <div>
    <input-table style="width:100%"
                 v-model="folders" @add="v=>{ v.config = { docker: {}, k8sDeployment : {}} ; v.port = 80  }">
      <el-table-column align="left" label="项目路径" minWidth="260">
        <template v-slot="scope">

          <el-input v-model="scope.row.path" style="flex:1"
                    placeholder="点(.)表示根路径"
                    chk=": if(value.startsWith('/')) return '不能以/开头'; if(value.endsWith('/')) return '不能以/结束'; "/>
          <span v-if="scope.row.path == '.' " style="color:red;margin-left: 10px">提示：根目录!</span>

        </template>
      </el-table-column>
      <el-table-column align="left" label="k8s应用名称" minWidth="180" >
        <template v-slot="scope">
          <el-input v-model="scope.row.name" placeholder="" chk="*" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="虚拟目录名称" minWidth="180" >
        <template v-slot="scope">


          <el-input v-model="scope.row.location" placeholder="VUE_APP_NGINX_VPATH_NAME"
             chk=": if( !value.startsWith('/') )  return '必须以 / 开头' "/>
          <span v-if="scope.row.location == '/' " style="color:red">警告:部署到一级目录!</span>

        </template>
      </el-table-column>

      <!--      <el-table-column align="center" label="端口" width="80" v-if="!$model.isLib">-->
      <!--        <template v-slot="scope">-->
      <!--          <el-button v-if="(!scope.row.port || scope.row.port == 80) && !$data.edit_def_port"-->
      <!--                     @click="$data.edit_def_port=true">80-->
      <!--          </el-button>-->
      <!--          <el-input v-else v-model="scope.row.port" chk="?int"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="left" label="中文名称" minWidth="180">
        <template v-slot="scope">

          <el-input v-model="scope.row.cnname"/>
          <span v-if="scope.row.name == '/' " style="color:red">必填!</span>

        </template>
      </el-table-column>
      <el-table-column align="center" label="编译脚本" width="110" v-if="!$model.isLib">
        <template v-slot="scope">
          <el-button size="small" @click="hook_click(scope.row,'buildScript')"
                     :type="scope.row.buildScript ? 'warning' : ''">buildScript
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Dockerfile | K8sDeployment" minWidth="260">
        <template v-slot="scope">
          <div style="display: flex;justify-content: space-between;gap:10px;">

            <selector v-model="scope.row.config.docker.id" :enum-count="0" :clearable="true" :auto1="false"
                      :data="langDockers"
                      fields="id,name" @change="(v,m)=>scope.row.config.docker.name=m.name"></selector>


            <selector v-model="scope.row.config.k8sDeployment.id" :enum-count="0" :clearable="true"
                      :auto1="false"
                      :data="$data.k8syamls" fields="id,name"
                      @change="(v,m)=>scope.row.config.k8sDeployment.name=m.name"></selector>
          </div>
        </template>
      </el-table-column>
    </input-table>
    <div style="line-height: 1.8">
      注：
      <br/>
      <el-tag>虚拟目录名称</el-tag>
      =
      <el-tag>VITE_APP_V_PATH</el-tag>
      <br/>
      Jenkins任务名称 = k8s svc名称 =
      <el-tag>虚拟目录名称</el-tag>
      -vue<br/>
      <el-tag>编译脚本</el-tag>
      是指
      <el-tag>package.json</el-tag>
      中
      <el-tag>script</el-tag>
      里的构建脚本，默认是 build
    </div>

    <el-dialog :title="$data.row.name + ' 自定义部署配置'" v-model="$data.folderConfigVisible" width="80%">
      <folder-config v-model="$data.row.config" @click="ok_click"></folder-config>
    </el-dialog>

    <el-dialog v-model="$data.dlg_show" width="40vw" style="text-align: center">
      <el-input v-model="$data.dlg_input" style="width:36vw;"></el-input>

      <div style="text-align: center;margin-top: 8px;">
        <el-button @click="hook_ok_click">确定</el-button>
        <label style="margin-left: 4px;">
          <el-tag>package.json</el-tag>
          中
          <el-tag>script</el-tag>
          里的构建脚本，默认是 build</label>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>


import folderConfig from "./folder-config.vue"




defineOptions({
  name: "vue-list",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  dockers: [],
  k8syamls: [],
  row: {},
  folderConfigVisible: false,
  edit_def_port: false,
  info: {},
  dlg_show: false,
  dlg_row: null,
  dlg_field: null,
  dlg_input: null
});


const $props = defineProps({
  id: {type: String},
  action: {type: String}
});

const action_name = $computed(() => {
  return {add: "添加", edit: "修改"}[$props.action]
});
const $model = defineModel({type: Object});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const langDockers = $computed(function () {
  return $data.dockers.filter(it => it.language == $model.value.language)
});

const folders = $computed({
  get() {
    return $model.value.folders;
  }, set(folders) {
    var v = Object.assign({}, $model.value, {folders});
    $emit("update:modelValue", v);
  }
});

const config_click = function (row) {
  $data.row = row;
  $data.folderConfigVisible = true;
};
const ok_click = function (config) {
  jv.info("在外面保存！")
  $data.row.config = config;
  $data.folderConfigVisible = false;
};


const hook_click = function (row, field) {
  $data.dlg_show = true;
  $data.dlg_row = row;
  $data.dlg_field = field;
  $data.dlg_input = $data.dlg_row[$data.dlg_field];
};
const hook_ok_click = function () {
  $data.dlg_show = false;
  $data.dlg_row[$data.dlg_field] = $data.dlg_input;
};

onMounted(function () {
  jv.$http.post("/dev/user-dockerfile/list?excludes=dockerfile").then(res => {
    $data.dockers = res.data.data;
  });
  jv.$http.post("/dev/user-k8s-deployment/list?excludes=yaml").then(res => {
    $data.k8syamls = res.data.data;
  });
})


</script>